<template>
  <div>
    <van-cell-group>
      <!-- 顶部用户信息单元格，绑定数据 -->
      <van-cell class="user-info">
        <!-- 头像 -->
        <van-image
          round
          width="50px"
          height="50px"
          :src="info.portrait"
        />
        <!-- 文字信息 -->
        <div class="user-info-text">
          <h3>{{info.userName}}</h3>
          <p><van-icon name="edit"/> 编辑个人资料</p>
        </div>
      </van-cell>
      <van-cell  class="user-account">
        <!-- 账户信息 - 宫格组件 -->
        <van-grid>
          <!-- 使用v-for创建结构 -->
          <van-grid-item v-for="item in account" :key="item.id">
            <p class="num">{{item.num}}</p>
            <p>{{item.title}}</p>
          </van-grid-item>
        </van-grid>
      </van-cell>
      <!-- 底部列表，使用v-for创建结构 -->
      <van-cell v-for="item in list" :key="item.id" :icon="item.icon" :value="item.value" :title="item.title" is-link />
    </van-cell-group>
    <!-- 使用子组件 -->
    <foot-bar></foot-bar>
  </div>
</template>

<script>
// 引入接口
import { getInfo } from '@/api/user'
// 引入底部导航栏组件
import FootBar from '../../common/foot-bar.vue'
export default {
  name: 'User',
  data () {
    return {
      // 用户信息数据
      info: {},
      // 账户信息数据
      account: [
        { id: 0, num: 14.05, title: '学习时长' },
        { id: 1, num: 200, title: '钱包/勾豆' },
        { id: 2, num: 1, title: '优惠券' },
        { id: 3, num: 213, title: '学分' }
      ],
      // 底部列表数据
      list: [
        { id: 0, icon: 'location-o', value: '收益200元', title: '分销中心' },
        { id: 1, icon: 'location-o', value: '', title: '个性化设置' },
        { id: 2, icon: 'location-o', value: '', title: '我的下载' },
        { id: 3, icon: 'location-o', value: '', title: '帮助与反馈' },
        { id: 4, icon: 'location-o', value: 'v2.0.0', title: '关于拉勾教育' }
      ]
    }
  },
  created () {
    // 初始化数据
    this.getUserInfo()
  },
  methods: {
    // 调用接口获取用户数据
    async getUserInfo () {
      const { data } = await getInfo()
      // 把获取到的数据写进data
      this.info = data.content
    }
  },
  // 组件注册
  components: {
    FootBar
  }
}
</script>

<style lang="scss" scoped>
// 顶部用户信息
.user-info{
  padding: 0;
  .van-cell__value {
    display: flex;
    padding: 30px 20px 0;
    background: #f89704;
    .user-info-text {
      flex: 1;
      margin-left: 15px;
      h3 {
        margin: 5px;
        font-size: 18px;
      }
      p {
        margin: 5px;
      }
    }
  }
}
// 账户信息样式
.user-account {
  margin-top: -1px;
  padding: 10px 16px;
  background: #f89704;
  .van-grid {
    border-radius: 10px;
    overflow: hidden;
    p {
      margin: 0;
    }
    .num {
      font-size: 22px;
      font-weight: 700;
    }
  }
}
</style>
